<!--学生门禁组批量分配-->
<template>
  <div class="log">
    <basic-container>
      <p style="margin-left: 6px">按照检索条件批量分配门禁组,且当所有检索条件为空时,默认分配对象为全部学生</p>
      <avue-crud
          ref="crud"
          :data="tableData"
          :option="tableOption"
          :page.sync="page"
          :permission="permissionList"
          :table-loading="tableLoading"
          @on-load="getList"
          @search-reset="searchReset"
          @search-change="searchChange"
          @refresh-change="refreshChange"
          @size-change="sizeChange"
          @current-change="currentChange">
        <template slot="state" slot-scope="scope">
          <el-tag v-if="scope.row.state === '0'" type="success">{{ scope.label }}</el-tag>
          <el-tag v-else-if="scope.row.state === '1'" type="danger">{{ scope.label }}</el-tag>
          <el-tag v-else-if="scope.row.state === null" type="info">未设置</el-tag>
        </template>
        <template slot="week" slot-scope="scope">
          <el-tag>{{ scope.label }}</el-tag>
        </template>
        <template slot="grouplist" slot-scope="scope">
          <el-tag
              v-for="(grouplist,index) in scope.row.group"
              :key="index">
            {{ grouplist.groupName }}
          </el-tag>
          <span v-if="scope.row.group === null">未设置</span>
        </template>
        <template slot="menuLeft">
          <el-button
              class="filter-item"
              size="small"
              type="warning"
              @click="batchAddDoor()">批量分配门禁组
          </el-button>
        </template>
      </avue-crud>
      <!--批量门禁组分配弹窗-->
      <el-dialog
          :visible.sync="dialogbetchAddDoor"
          center
          title="批量门禁组分配"
          width="45%" @close="dictItemVisible"
          :close-on-click-modal="false">
        <el-form>
          <el-form-item>
            <p style="font-size: 16px;font-weight: bold;margin: 0;color: black">
              当前筛选条件下共
              <span style="color: red">{{ this.page.total }}</span>人</p>
          </el-form-item>
          <avue-form v-model="allgroup" :option="option" placeholder="请选择内容"></avue-form>
          <p class="betch">*选择可通行门禁保存分配后，该筛选条件下人员的门禁组将被替换</p>
          <p class="betch" style="margin-top: 10px">*分配可通行门禁为空保存分配时，默认将该筛选条件下人员的门禁组清空</p>
        </el-form>
        <div slot="footer" :span="24">
          <el-button class="filter-item" size="small" @click="dictItemVisible()">取消</el-button>
          <el-button class="filter-item" size="small" type="primary" @click="batchSaveDoor()">保存分配</el-button>
        </div>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {GROUP_SEX, PASS_DETAILS} from '@/const/Dict'
import {PERSON_DETAILS, PERSON_OPERA} from "@/const/personDict";
import {conditBatchDoor} from "@/api/pass/s-passview";
import {doorgroupObj} from "@/api/pass/s-doorgroup";

export default {
  name: "s-passview",
  data() {
    return {
      tableData: [],
      searchForm: {},
      area: '',
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableLoading: false,
      dialogbetchAddDoor: false,
      dialogbetchAddTime: false,
      allgroup: {},
      currentrow: {},
      schid: '',
      schemeNames: [],
      option: {
        submitBtn: false,
        emptyBtn: false,
        column: [{
          prop: 'accessControlIds',
          props: {
            label: 'groupName',
            value: 'id'
          },
          dicUrl: '/campus/accesscontrolgroup/selectAll',
          dicMethod: 'get',
          multiple: true,
          span: 15,
          labelWidth: 120,
          type: 'select',
          dataType: 'array',
          placeholder: '请选择可通行门禁',
          label: '分配可通行门禁',
          clearable: false,
        }]
      },
      tableOption: {
        border: true,
        index: true,
        indexLabel: '序号',
        stripe: true,
        menuAlign: 'center',
        align: 'center',
        menuType: 'button',
        menu: false,
        refreshBtn: true,
        showClomnuBtn: false,
        searchSize: 'mini',
        searchMenuSpan: 6,
        searchLabelWidth: 90,
        labelWidth: "20%",
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        selection: false,
        props: {
          label: 'label',
          value: 'value'
        },
        column: [
          {
            label: '人员id',
            prop: 'id',
            hide: true
          },
          {
            label: '姓名',
            prop: 'personName',
            type: 'input',
            search: true,
          }, {
            label: '学号',
            prop: 'number',
            dicData: PASS_DETAILS,
          }, {
            label: '性别',
            prop: 'sex',
            type: 'select',
            search: true,
            dicData: GROUP_SEX,
            change: (value) => {
              if (value.value === '') {
                return;
              }
              this.searchForm.sex = value.value
              this.getList(this.page, this.searchForm)
            },
          }, {
            label: '校区',
            prop: 'campusDeptArea',
            dicData: PERSON_DETAILS,
            editDisplay: false,
          },{
            label: '年级',
            prop: 'deptParentName',
            dicData: PERSON_DETAILS,
          }, {
            label: '年级',
            prop: 'deptId',
            search: true,
            type: 'select',
            hide: true,
            defaultExpandAll: true,
            dicUrl: '/admin/dept/PermissionTree',
            cascaderItem: ['deptName'],
            dicMethod: 'get',
            props: {
              label: 'name',
              value: 'id'
            },
            dicFormatter: (res) => {
              let gradeArr = res.data
              let value = []
              if(gradeArr.length> 0){
                for(let i of gradeArr){
                  if(i.typeNum == "2" && i.isLock === false){
                    value.push(i)
                  }
                }
                console.log(value)
                return value
              }
            },
            change: (value) => {
              this.searchForm.deptId = value.value
              this.getList(this.page, this.searchForm)
            },
          }, {
            label: '班级',
            prop: 'sysDeptName',
            dicData: PERSON_DETAILS,
          }, {
            label: '班级',
            prop: 'deptName',
            dicData: PERSON_DETAILS,
            search: true,
            filter: false,
            hide: true,
            type: 'select',
            defaultExpandAll: true,
            dicUrl: '/campus/sysdept/detpTree/{{key}}/1,2,3',
            dicFormatter: (res) => {
              return res.data[0].children;//返回字典的层级结构
            },
            dicMethod: 'get',
            props: {
              label: 'name',
              value: 'deptId',
            },
            change: (value) => {
              this.searchForm.deptId = value.value
              this.getList(this.page, this.searchForm)
            },
          },{
            label: '学生属性',
            prop: 'identityKey',
            type: 'select',
            search: true,
            dicUrl: '/campus/identity/selectAll?groupNum=2',
            dicMethod: 'get',
            props: {
              label: 'name',
              value: 'id'
            },
            change: (value) => {
              if (value.value === '') {
                return;
              }
              this.searchForm.identityKey = value.value
              this.getList(this.page, this.searchForm)
            },
          }, {
            label: '楼栋',
            prop: 'buildingName',
            dicData: PERSON_DETAILS,
          }, {
            label: '楼栋',
            prop: 'buildingId',
            hide: true,
            search: true,
            type: 'select',
            dicUrl: '/campus/building/selectAll',
            dicMethod: 'get',
            props: {
              label: 'buildingName',
              value: 'buildingId'
            },
            change: (value) => {
              this.searchForm.buildingId = value.value
              this.getList(this.page, this.searchForm)
            },
          }, {
            label: '宿舍号',
            prop: 'dormNumber',
            dicData: PERSON_DETAILS,
          }, {
            label: '可通行门禁',
            prop: 'grouplist',
            slot: true,
          }, {
            label: '可通行门禁',
            prop: 'accessGroupId',
            type: 'select',
            search: true,
            hide: true,
            dicUrl: '/campus/accesscontrolgroup/selectAll',
            dicMethod: 'get',
            dicFlag: true,
            clearable: false,
            props: {
              label: 'groupName',
              value: 'id'
            },
            change: (value) => {
              if (value.value === '') {
                return;
              }
              this.searchForm.accessGroupId = value.value
              this.getList(this.page, this.searchForm)
            },
          }, {
            width: 150,
            label: '方案修改时间',
            prop: 'updateTime',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            addDisplay: false,
            editDisplay: false,
          }, {
            label: '修改操作人',
            prop: 'operator',
            dicData: PERSON_OPERA
          },
        ]
      }

    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList() {
      return {
        delBtn: this.vaildData(this.permissions.sys_time_del, false),
      }
    }
  },
  methods: {
    //展示表格
    getList(page, params) {
      this.tableLoading = true
      doorgroupObj(Object.assign({
        current: page.currentPage,
        size: page.pageSize,
        groupNum: 2
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      })
    },

    //批量分配门禁组弹窗
    batchAddDoor: function () {
      this.dialogbetchAddDoor = true
    },

    //批量分配门禁组保存分配
    batchSaveDoor(params) {
      let that = this
      this.$confirm('确定为这些人员进行分配吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return conditBatchDoor(Object.assign({
          paramAccessControlIds: that.allgroup.accessControlIds,
          groupNum: 2
        }, params, that.searchForm))
      }).then(res => {
        if (res.data.code === 0) {
          this.dialogbetchAddDoor = false
          this.$message.success('分配成功')
          this.getList(that.page);
        } else {
          this.dialogbetchAddDoor = false
          this.$message.error('分配失败')
          this.getList(that.page);
        }
      })
    },

    //关闭批量分配弹窗
    dictItemVisible: function () {
      this.allgroup.accessControlIds = null
      this.dialogbetchAddDoor = false
    },

    //搜索页面内容
    searchChange(form, done) {
      if (form.deptName !== undefined) {
        form.deptId = form.deptName
      }
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },

    //点击每页多少条会调size-change方法回调
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },

    //点击页码会调用current-change方法回调当前页
    currentChange(current) {
      this.page.currentPage = current
    },
    refreshChange() {
      this.getList(this.page)
    },

    //清空时重置页面
    searchReset() {
      this.searchForm = {};
      this.getList(this.page)
    }
  }
}
</script>

<style scoped>
/deep/.el-form-item__label{
  text-align: left;
}
/deep/.avue-form__row{
  padding-left: 2px !important;
  padding-right: 36px!important;
}

/deep/ .avue-form__menu--center {
  text-align: left;
}

/deep/ .avue-form__menu--center .el-button {
  margin: 0 20px 0 0;
}

/deep/ .el-dialog--center .el-dialog__body {
  padding: 5px 25px 30px;
}

.betch {
  color: red;
  padding: 0;
  margin: 0;
}

/deep/ .el-col-24 {
  display: none;
}
</style>
